export default function User() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4 p-4">
      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => {
        return (
          <div
            className="overflow-hidden rounded-xl bg-white shadow-md"
            key={item}
          >
            <div className="md:flex">
              <div className="md:shrink-0">
                <img
                  className="h-48 w-full object-cover md:h-full md:w-48"
                  src="https://images.unsplash.com/photo-1637734433731-621aca1c8cb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=404&q=80"
                  alt="Modern building architecture"
                />
              </div>
              <div className="p-8">
                <div className="text-sm font-semibold tracking-wide text-indigo-500 uppercase">
                  Company retreats {item}
                </div>
                <a
                  href="#"
                  className="mt-1 block text-lg leading-tight font-medium text-black hover:underline"
                >
                  Incredible accommodation for your team
                </a>
                <p className="mt-2 text-gray-500">
                  Looking to take your team away on a retreat to enjoy awesome
                  food and take in some sunshine? We have a list of places to do
                  just that.
                </p>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}
